<template>
	<interact-model ref="interact-model" title="河流信息" class="drainPort-model">
		<div class="drainPort-warpper">
			<div class="drainPort-tabs">
				<Tabs type="card" v-model="activeTab" :animated="false">
					<TabPane label="基础信息" name="info"></TabPane>
					<TabPane label="景观图片" name="picture"></TabPane>
					<TabPane label="事件信息" name="thing"></TabPane>
					<TabPane label="巡河记录" name="patrol"></TabPane>
				</Tabs>
			</div>

			<div class="drainPort-content">
				<div class="drainPort-table" v-show="activeTab === 'info'">
					<table border class="table">
						<tbody>
							<tr>
								<td>河名</td>
								<td>{{river_name}}</td>
								<td>所属区</td>
								<td>{{area}}</td>
							</tr>
							<tr>
								<td>所属镇</td>
								<td>{{town}}</td>
								<td>所属村</td>
								<td>{{village}}</td>
							</tr>
							<tr>
								<td v-if="city_chref">市级河长</td>
								<td v-if="city_chref">{{city_chref}}</td>
								<td v-if="area_chref">区级河长</td>
								<td v-if="area_chref">{{area_chref}}</td>
							</tr>
                            <tr>
                                <td v-if="town_chref">镇级河长</td>
                                <td v-if="town_chref">{{town_chref}}</td>
                                <td v-if="village_chref">村级河长</td>
                                <td v-if="village_chref">{{village_chref}}</td>
                            </tr>
							<tr>
								<td>长度(Km)</td>
								<td>{{length}}</td>
								<td>类型</td>
								<td>{{type}}</td>
							</tr>
							<tr>
								<td>一河一策文件</td>
								<td colspan="3" v-if="planeSrc"><img src="../../../../static/img/pdf.png" height="30" width="30" alt=""><a style="line-height: 41px;color: #DE5A34;margin-left: 5px" :href="planeSrc" target="_blank" title="">{{river_name}}附件</a></td>
								<td v-else>暂无附件</td>
							</tr>
							<tr>
								<td>描述</td>
								<td colspan="3">{{content}}</td>
							</tr>
						</tbody>
					</table>
				</div>

				<div v-show="activeTab === 'picture'">
					<div>
						<Form :model="searchItem" :label-width="60">
							<i-col span="8" style="height:33px">
								<Form-item label="景观时间" prop="time">
	                        		<Date-picker type="date" placeholder="请选择景观时间" format="yyyy-MM-dd" @on-change="change"></Date-picker>
	                    		</Form-item>
	                    	</i-col>
	                    	<i-col span="16" style="height:33px">
	                    		<Form-item><Button type="primary" @click="getPlane(saveName,'景观')">搜索</Button></Form-item>
	                    	</i-col>
						</Form>
						<template v-if="sceneryData.length > 0">
							<i-col v-for="v in sceneryData" :key="v.title" span="8">
								<Card class="smallCard">
									<p slot="title">更新于：{{v.date_time}}</p>
									<img :src="v.photo" alt="">
								</Card>
							</i-col>
							<Page class="pull-right"
								:total="Page.total"
								:current="Page.current"
								:page-size="Page.pageSize"
								size="small"
								show-total
								@on-change="changePage"></Page>
						</template>
						<i-col span="24" v-if="!sceneryData.length > 0">
							<div class="big_img">
								<img src="../img/aPictureNoPicture.png" alt="">
							</div>
						</i-col>

					</div>
					<!-- <img v-if="data.zoomimgpath" :src="`http://183.238.82.210:8090/ztwater/fileupdown.viewzoomimage.d?picname=${data.zoomimgpath}`" alt="">
					<div v-else class="drainPort-noPicture"></div> -->
				</div>
				<div v-show="activeTab === 'thing'">
					<Table :data="reportData" :columns="reportColumns" stripe></Table>
					<Page class="pull-right"
						:total="Page2.total"
						:current="Page2.current"
						:page-size="Page2.pageSize"
						size="small"
						show-total
						@on-change="changePage2"></Page>
				</div>
				<div v-show="activeTab === 'patrol'">
					<Table :data="patrolData" :columns="patrolColumns" stripe></Table>
					<Page class="pull-right"
						:total="Page3.total"
						:current="Page3.current"
						:page-size="Page3.pageSize"
						size="small"
						show-total
						@on-change="changePage3"></Page>
				</div>
			</div>
		</div>
		<Modal v-model="printModal" class="modal-pump" width="800" title="事件详情">
            <Form :model="formItem" :label-width="120">
                <i-col span="12">
                    <Form-item label="经办人" prop="confirm_person">
                        <Input v-model="formItem.confirm_person" readonly :maxlength="12" value="河长办"></Input>
                    </Form-item>
                    <Form-item label="投诉人" prop="contacts">
                        <Input v-model="formItem.contacts" :maxlength="10" readonly placeholder="请输入投诉人"></Input>
                    </Form-item>
                    <Form-item label="联系方式" prop="phone">
                        <Input v-model="formItem.phone" :maxlength="11 " readonly placeholder="请输入联系方式"></Input>
                    </Form-item>
                    <Form-item label="河湖名称（河段）" prop="river_name">
                        <Input v-model="formItem.river_name" :maxlength="12" readonly placeholder="请输入河湖名称（河段）"></Input>
                    </Form-item>
                </i-col>
                <i-col span="12">
                    <Form-item label="登记编号" prop="report_no">
                        <Input v-model="formItem.report_no" readonly :maxlength="20"></Input>
                    </Form-item>
                    <Form-item label="投诉时间" prop="report_time">
                        <Input v-model="formItem.report_time" :maxlength="20" readonly placeholder="请输入投诉时间"></Input>
                    </Form-item>
                    <Form-item label="身份证" prop="contacts_id">
                        <Input v-model="formItem.contacts_id" :maxlength="20" readonly placeholder="请输入身份证"></Input>
                    </Form-item>
                    <Form-item label="地点" prop="address">
                        <Input v-model="formItem.address" :maxlength="18" readonly placeholder="地址"></Input>
                    </Form-item>
                </i-col>
                <i-col span="24">
                    <Form-item label="事件描述" prop="overview">
                        <Input v-model="formItem.overview" type="textarea" :maxlength="500" readonly placeholder="事件描述"></Input>
                    </Form-item>
                    <Form-item label="初步办理意见" prop="complete_opinion">
                        <Input v-model="formItem.complete_opinion" type="textarea" :maxlength="500" readonly placeholder="初步办理意见"></Input>
                    </Form-item>
                    <Form-item label="处理结果" prop="solve_result">
                        <Input v-model="formItem.solve_result" type="textarea" :maxlength="500" readonly placeholder="处理结果"></Input>
                    </Form-item>
                </i-col>
            </Form>
        </Modal>
        <Modal v-model="mapModal" width="1000">
            <p slot="header" style="color:#f60;text-align:center">
                查看巡查事件
                <div style="float: left">
                    <img src="../../../../static/img/gis1.png" height="30" width="30" alt="">
                    <span>景观</span>
                    <img src="../../../../static/img/weizhi.png" height="30" width="30" alt="">
                    <span>举报</span>
                </div>
            </p>
            <div id="map" ref="map">

            </div>
        </Modal>
		<loading v-show="showLoading"></loading>
	</interact-model>
</template>

<script>
	import {
		loadingMixin,
		interactModelMixin,
		aPictureModelMixin
	} from 'common/js/mixins'
import { ERR_OK } from 'api/config'
import { domain2 } from 'global/setting';
import { ajaxPost } from 'global/axios'
import storage from 'good-storage'
export default {
		mixins: [
			loadingMixin,
			interactModelMixin,
			aPictureModelMixin
		],
		data () {
			return {
				showLoading: false,
				dataMapList: '/waterenvir/bsiriver/list',
				urlRiverList: '/bsi/riverchief/find',
				urlPlaneList: '/bsi/riverplane/list',
				urlSceneryList: '/emergency/scenery/list',
				urlReportList: '/emergency/report/list',
				urlPatrolList: '/emergency/patrol/list',
				patrolFindList: '/emergency/patrol/find',
				river_name: '',
				village: '',
				chref_name: '',
				area: '',
				town: '',
				activeTab: 'info',
				river_no: '',
				length: '',
				content: '',
				type: '',
				planeSrc: '',
				searchItem: {
					time: ''
				},
                city_chref: '',
                area_chref: '',
                town_chref: '',
                village_chref: '',
				sceneryData: [],
				saveName: '',
				reportData: [],
				reportColumns: [{
					title: '河流名称',
					key: 'river_name'
				}, {
					title: '状态',
					key: 'solve_is'
				}, {
					title: '所属河长办',
					render: (h, params) => {
						return params.row.location.dep_name
					}
				}, {
					title: '描述',
					key: 'overview'
				}, {
					title: '操作',
					render: (h, params) => {
						return h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.printModal = true
                                        this.formItem = params.row
                                    }
                                }
                            }, '详细')
					}
				}],
				formItem: {},
				printModal: false,
				patrolData: [],
				patrolColumns: [{
					title: '河流名称',
					key: 'river_name'
				}, {
                    title: '本次巡河景观事件',
                    render: (h, params) => {
                        return params.row.scenerys.length
                    }
                }, {
                    title: '本次巡河举报事件',
                    render: (h, params) => {
                        return params.row.reports.length
                    }
                }, {
                    title: '巡查时间',
                    key: 'runtime'
                }, {
                    title: '操作',
                    key: 'action',
                    render: (h, param) => {
                        if (param.row.end_time !== undefined && param.row.end_time !== undefined) {
                            return h('div', [
                                        h('Button', {
                                            props: {
                                                type: 'primary',
                                                size: 'small'
                                            },
                                            style: {
                                                marginRight: '5px'
                                            },
                                            on: {
                                                click: () => {
                                                    this.showMap(param.row)
                                                }
                                            }
                                        }, '查看事件')
                                    ])
                        } else {
                            return '巡查尚未结束'
                        }
                    }
                }],
                mapModal: false,
				Page: { // 景观分页
					current: 1,
					pageSize: 9,
					total: 0,
				},
				Page2: { // 事件分页
					current: 1,
					pageSize: 10,
					total: 0,
				},
				Page3: { // 巡查分页
					current: 1,
					pageSize: 10,
					total: 0,
				},
			}
		},
		methods: {
			show (feature, layer) {
				this.planeSrc = ''
				this.searchItem.time = ''
				this.$refs['interact-model'].showModel()
			let id = feature.H._id
			let name = feature.H.river_no
			this.saveName = name
			this.getRiverData(name)
			this.getPlane(name)
			this.getPlane(name, '景观')
				this.getPlane(name, '事件')
				this.getPlane(name, '巡查')
			},
			getRiverData (name) {
                this.showLoading = true
                var params = {
                    data: {
                        river_no: name
                    },
                    token: storage.session.get('token'),
                    url: this.urlRiverList,
                    success: (res) => {
                        if (res.data.code == '0000') {
                            this.showLoading = false
                            this.$Loading.finish()
                        	let item = res.data.result
                        	this.river_name = item.river_name
                        	this.area = item.area
                        	this.town = item.town
                        	this.village = item.village
                        	this.river_no = item.river_no
                        	this.length = item.length
                        	this.type = item.type
                        	this.content = item.content
                            if (item.city_chief) {
                                this.city_chref = item.city_chief[0] ? item.city_chief[0].realname : ''
                            }
                            if (item.town_chiefs) {
                                item.town_chiefs.map(items => {
                                    this.town_chref += items.realname + ','
                                })
                            }
                            if (item.area_chiefs) {
                                item.area_chiefs.map(items => {
                                    this.area_chref += items.realname + ','
                                })
                            }
                            if (item.village_chiefs) {
                                item.village_chiefs.map(items => {
                                    this.village_chref += items.realname + ','
                                })
                            }
                        }
                    }
                }
                ajaxPost(params)
            },
            getPlane (name, type = '一河一策', page = 1) {
            	let params = {
            		data: {
            			searchValue: {
            				river_no: name
            			}
            		},
            		token: storage.session.get('token'),
            		url: this.urlPlaneList,
            		success: res => {
						if (res.data.code === '0000') {
            				this.planeSrc = res.data.result.result[0] ? domain2 + res.data.result.result[0].pdf_place : ''
						}
            		}
            	}
            	if (type === '景观') {
					params.data.page = page
					params.data.pageSize = this.Page.pageSize
            		if (this.searchItem.time !== '') {
            			params.data.searchValue.date_time = this.searchItem.time + '|#|like'
            		}
            		params.url = this.urlSceneryList
            		params.success = res => {
						if (res.data.code === '0000') {
							this.Page.total = res.data.result.totalSize
							this.sceneryData = res.data.result.result
							this.sceneryData.map(item => {
								item.photo = domain2 + item.photo
							})
							this.$Loading.finish()
						}
            		}
            	} else if (type === '巡查') {
					params.data.page = page
					params.data.pageSize = this.Page3.pageSize
            		params.url = this.urlPatrolList
            		params.data.searchValue.patrol_is = '已结束'
            		params.success = res => {
						if (res.data.code === '0000') {
							this.Page3.total = res.data.result.totalSize
							this.patrolData = res.data.result.result
						}
            		}
            	} else if (type === '事件') {
					params.data.page = page
					params.data.pageSize = this.Page2.pageSize
            		params.url = this.urlReportList
            		params.success = res => {
						if (res.data.code === '0000') {
							this.Page2.total = res.data.result.totalSize
							this.reportData = res.data.result.result
						}
            		}
            	}
            	name && ajaxPost(params)
            },
            change (data) {
            	this.searchItem.time = data
            },
            showMap (row) {
                this.mapModal = true
                var center = new qq.maps.LatLng(row.route[0].lat, row.route[0].lng)
                var map = new qq.maps.Map(document.getElementById('map'), {
                    center: center,
                    zoom: 16
                })
                var path1 = []
                for (var i = 0; i < row.route.length; i++) {
                    path1.push(new qq.maps.LatLng(row.route[i].lat, row.route[i].lng))
                }
                var polyline = new qq.maps.Polyline({
                    path: path1,
                    strokeColor: '#FF0000',
                    strokeWeight: 2,
                    editable: false,
                    map: map
                })
                var params = {}
                params.data = {}
                params.data.searchValue = {
                    patrol_no: row.patrol_no
                }
                params.token = storage.session.get('token')
                params.url = this.patrolFindList
                params.success = function (res) {
                    if (res.data.result.reports.length > 0) {
                        var html = ''
                        res.data.result.reports.map(function (item, index) {
                                var marker = new qq.maps.Marker({
                                position: new qq.maps.LatLng(item.lat, item.lng),
                                map: map
                            })
                            var anchor = new qq.maps.Point(0, 39),
                                size = new qq.maps.Size(42, 68),
                                origin = new qq.maps.Point(0, 0),
                                markerIcon = new qq.maps.MarkerImage(
                                  '../../../../static/img/weizhi.png',
                                  size,
                                  origin,
                                  anchor
                            )
                                marker.setIcon(markerIcon)
                            var info = new qq.maps.InfoWindow({
                                map: map
                            })
                            for (let i = 0; i < item.photos.length; i++) {
                                html += '<img style="width:95px;height:100px;margin-right:5px;" src="' + domain2 + item.photos[i] + '">'
                            }
                            qq.maps.event.addListener(marker, 'click', function () {
                                info.open()
                                info.setContent('<div class="bigModal"><p>' + item.report_time + '</p><p>' + item.overview + '</p><div class="img">' + html + '</div></div>')
                                info.setPosition(new qq.maps.LatLng(item.lat, item.lng))
                            })
                        })
                    }
                    if (res.data.result.scenerys.length > 0) {
                        var html = ''
                        res.data.result.scenerys.map((item) => {
                            var marker = new qq.maps.Marker({
                                position: new qq.maps.LatLng(item.lat, item.lng),
                                map: map
                            })
                            var anchor = new qq.maps.Point(0, 39),
                                size = new qq.maps.Size(42, 68),
                                origin = new qq.maps.Point(0, 0),
                                markerIcon = new qq.maps.MarkerImage(
                                  '../../../../static/img/gis1.png',
                                  size,
                                  origin,
                                  anchor
                            )
                            marker.setIcon(markerIcon)
                            var info = new qq.maps.InfoWindow({
                                map: map
                            })
                            html += '<img style="width:200px;height:150px;margin-right:5px;" src="' + domain2 + item.photo + '">'
                            qq.maps.event.addListener(marker, 'click', function () {
                                info.open()
                                info.setContent('<div class="bigModal1"><p>' + item.date_time + '</p><div class="img">' + html + '</div></div>')
                                info.setPosition(new qq.maps.LatLng(item.lat, item.lng))
                            })
                        })
                    }
                }
                ajaxPost(params)
            },
			// 景观-分页
			changePage(page) {
				this.getPlane(this.saveName, '景观', page);
			},
			// 事件-分页
			changePage2(page) {
				this.getPlane(this.saveName, '事件', page);
			},
			// 巡查-分页
			changePage3(page) {
				this.getPlane(this.saveName, '巡查', page);
			},
		}
	}
</script>

<style lang="scss">
	.drainPort-model {
		width: 700px;
		height: 540px;
		#map{
        	width: 100%;
        	height: 600px;
    	}
    	.smallImg{
	        width:95px;
	        height:100px;
	        margin-right:5px;
	    }
	    .smallImg1{
	        width:200px;
	        height:150px;
	        margin-right:5px;
	    }
		.drainPort-warpper {
			width: 100%;
			height: 100%;
			position: relative;
			overflow-y: scroll;
			.drainPort-tabs {
				position: absolute;
				left: 5px;
				right: 5px;
				top: 5px;
			}
			.drainPort-content {
				position: absolute;
				left: 5px;
				right: 5px;
				top: 40px;
				bottom: 5px;
				.big_img{
					width: 50%;
					height: 50%;
					overflow: hidden;
					margin: 0 auto;
					img{
						width: 100%;
						height: 100%;

					}
				}
				.smallCard {
					margin: 5px;
					height: 170px;
					overflow: hidden;
					.ivu-card-body{
						height: 100%;
					}
					img{
						width: 100%;
						height: 100%;
					}
				}
				.drainPort-table {
					width: 100%;
					.table {
						width: 100%;
						margin: auto;
						font-size: 14px;
						border: 1px solid #ddd;
						td {
							width: 25%;
							padding: 5px;
						}
					}
				}
				.drainPort-noPicture {
					width: 100%;
					height: 100%;
					text-align: center;
					background-image: url("../img/aPictureNoPicture.png");
					background-position: center 35%;
					background-repeat: no-repeat;
				}

			}
    }
    .ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab {
      background: none;
    }
	}
	// 查看巡查事件
	#map{
		width: 100%;
		height: 600px;
	}
</style>
